<template>
  <div class="dict-management">
    <div class="dict-container">
      <!-- 左侧字典类型管理 -->
      <div class="dict-type-panel">
        <div class="panel-header">
          <h3>字典类型</h3>
          <div class="header-actions">
            <BaseButton type="primary" size="small" @click="addDictType">新增类型</BaseButton>
          </div>
        </div>

        <!-- 搜索过滤 -->
        <div class="search-filter">
          <el-input
            v-model="searchKeyword"
            placeholder="搜索字典类型名称或编码"
            prefix-icon="Search"
            clearable
            @input="filterDictTypes"
          />
        </div>

        <!-- 字典类型列表 -->
        <div class="dict-type-list">
          <div
            v-for="item in filteredDictTypes"
            :key="item.dictTypeId"
            class="dict-type-item"
            :class="{ active: currentDictType?.dictTypeId === item.dictTypeId }"
            @click="selectDictType(item)"
          >
            <div class="item-content">
              <div class="type-info">
                <span class="type-name">{{ item.dictTypeName }}</span>
                <span class="type-code">[{{ item.dictTypeCode }}]</span>
              </div>
            </div>
            <div class="item-actions">
              <el-button type="primary" size="small" text @click.stop="editDictType(item)">
                编辑
              </el-button>
              <el-button type="danger" size="small" text @click.stop="deleteDictType(item)">
                删除
              </el-button>
            </div>
          </div>

          <!-- 空状态 -->
          <div v-if="filteredDictTypes.length === 0" class="empty-list">
            <p>{{ searchKeyword ? '未找到匹配的字典类型' : '暂无字典类型数据' }}</p>
          </div>
        </div>
      </div>

      <!-- 右侧字典项管理 -->
      <div class="dict-item-panel">
        <!-- 顶部操作区域 -->
        <div class="panel-header">
          <div class="header-left">
            <h3>字典项</h3>
          </div>
          <div class="header-actions">
            <BaseButton type="primary" size="small" @click="addDictItem"> 新增字典项 </BaseButton>
            <BaseButton type="info" size="small" @click="refreshDictItems"> 刷新 </BaseButton>
          </div>
        </div>

        <!-- 当前字典类型信息 -->
        <div v-if="currentDictType" class="current-dict-type-info">
          <span class="dict-type-label">当前字典类型：</span>
          <span class="dict-type-name">{{ currentDictType.dictTypeName }}</span>
          <span class="dict-type-code">[{{ currentDictType.dictTypeCode }}]</span>
        </div>

        <!-- 字典项表格 -->
        <div class="dict-item-content">
          <el-card shadow="never" class="table-card">
            <el-table
              :data="dictItems || []"
              stripe
              style="width: 100%"
              v-loading="tableLoading"
              :header-cell-style="{ background: '#fafafa', color: '#606266' }"
              class="dict-table"
              border
              row-key="dictId"
              :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            >
              <el-table-column prop="dictName" label="字典名称" min-width="150">
                <template #default="{ row }">
                  <span class="dict-name">{{ row.dictName }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="dictCode" label="字典编码" min-width="120">
                <template #default="{ row }">
                  <el-tag size="small" type="info" effect="plain">{{ row.dictCode }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="ordinal" label="排序号" width="80" align="center">
                <template #default="{ row }">
                  <el-tag size="small" type="warning" effect="plain">{{ row.ordinal }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="remark" label="备注" min-width="150">
                <template #default="{ row }">
                  <span class="remark-text">{{ row.remark || '-' }}</span>
                </template>
              </el-table-column>

              <el-table-column label="操作" width="220" fixed="right" align="center">
                <template #default="{ row }">
                  <div class="action-buttons">
                    <el-button type="primary" size="small" text @click="editDictItem(row)">
                      编辑
                    </el-button>
                    <el-button type="danger" size="small" text @click="deleteDictItem(row)">
                      删除
                    </el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>

            <!-- 空状态 -->
            <div v-if="!dictItems || dictItems.length === 0" class="empty-state">
              <el-empty :image-size="80" description="暂无字典项数据">
                <template #description>
                  <p>{{ currentDictType ? '该字典类型下暂无字典项' : '请先选择字典类型' }}</p>
                </template>
              </el-empty>
            </div>
          </el-card>
        </div>
      </div>
    </div>

    <!-- 字典类型编辑对话框 -->
    <el-dialog
      v-model="dictTypeDialogVisible"
      :title="dictTypeDialogTitle"
      width="500px"
      @close="resetDictTypeForm"
    >
      <el-form
        ref="dictTypeFormRef"
        :model="dictTypeForm"
        :rules="dictTypeFormRules"
        label-width="100px"
      >
        <el-form-item label="类型名称" prop="dictTypeName">
          <el-input v-model="dictTypeForm.dictTypeName" placeholder="请输入字典类型名称" />
        </el-form-item>
        <el-form-item label="类型编码" prop="dictTypeCode">
          <el-input v-model="dictTypeForm.dictTypeCode" placeholder="请输入字典类型编码" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dictTypeDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveDictType">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 字典项编辑对话框 -->
    <el-dialog
      v-model="dictItemDialogVisible"
      :title="dictItemDialogTitle"
      width="800px"
      @close="resetDictItemForm"
    >
      <el-form
        ref="dictItemFormRef"
        :model="dictItemForm"
        :rules="dictItemFormRules"
        label-width="100px"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="字典类型" prop="dictTypeCode">
              <el-select
                v-model="dictItemForm.dictTypeCode"
                placeholder="请选择字典类型"
                style="width: 100%"
                disabled
              >
                <el-option
                  v-for="type in dictTypes"
                  :key="type.dictTypeCode"
                  :label="type.dictTypeName"
                  :value="type.dictTypeCode"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="字典名称" prop="dictName">
              <el-input v-model="dictItemForm.dictName" placeholder="请输入字典名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="字典编码" prop="dictCode">
              <el-input v-model="dictItemForm.dictCode" placeholder="请输入字典编码" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="所属父字典" prop="dictParentId">
              <el-tree-select
                v-model="dictItemForm.dictParentId"
                :data="parentDictTreeData"
                :props="treeSelectProps"
                :check-strictly="true"
                placeholder="请选择父字典"
                style="width: 100%"
                filterable
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="排序号" prop="ordinal">
              <el-input-number
                v-model="dictItemForm.ordinal"
                :min="0"
                placeholder="请输入排序号"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input
                v-model="dictItemForm.remark"
                type="textarea"
                :rows="3"
                placeholder="请输入备注信息"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dictItemDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveDictItem">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed, nextTick } from 'vue'
import {
  ElMessage,
  ElMessageBox,
  ElForm,
  ElFormItem,
  ElInput,
  ElTreeSelect,
  ElInputNumber,
  ElRow,
  ElCol,
  ElDialog,
  ElButton,
  ElTable,
  ElTableColumn,
  ElIcon,
  ElEmpty,
  ElTag,
  ElCard,
  ElSelect,
  ElOption
} from 'element-plus'
import { BaseButton } from '@/components/Button'
import {
  getSysDictListApi,
  getSysDictDetailApi,
  saveOrUpdateSysDictApi,
  deleteSysDictApi,
  getSysDictTypeListApi,
  getSysDictByTypeApi,
  getSysDictTypeDetailApi,
  saveOrUpdateSysDictTypeApi,
  deleteSysDictTypeApi,
  type SysDict,
  type DictDTO,
  type SysDictType
} from '@/api/system/dict'

// 响应式数据
const currentDict = ref<SysDict | null>(null)
const formRef = ref<InstanceType<typeof ElForm>>()
const parentDictTreeData = ref<DictDTO[]>([])

// 字典类型相关数据
const dictTypes = ref<SysDictType[]>([])
const currentDictType = ref<SysDictType | null>(null)
const searchKeyword = ref('')
const dictTypeDialogVisible = ref(false)
const dictTypeDialogTitle = ref('')
const dictTypeFormRef = ref<InstanceType<typeof ElForm>>()
const dictTypeForm = reactive<SysDictType>({
  dictTypeName: '',
  dictTypeCode: ''
})

// 过滤后的字典类型列表
const filteredDictTypes = computed(() => {
  if (!searchKeyword.value) {
    return dictTypes.value
  }
  const keyword = searchKeyword.value.toLowerCase()
  return dictTypes.value.filter(
    (item) =>
      item.dictTypeName.toLowerCase().includes(keyword) ||
      item.dictTypeCode.toLowerCase().includes(keyword)
  )
})

// 表单验证规则
const formRules = reactive({
  dictName: [{ required: true, message: '请输入字典名称', trigger: 'blur' }],
  dictCode: [{ required: true, message: '请输入字典编码', trigger: 'blur' }],
  dictTypeCode: [{ required: true, message: '请输入字典类型', trigger: 'blur' }]
})

// 树选择器配置
const treeSelectProps = {
  children: 'children',
  label: 'dictName',
  value: 'dictId'
}

// 字典类型表单验证规则
const dictTypeFormRules = reactive({
  dictTypeName: [{ required: true, message: '请输入字典类型名称', trigger: 'blur' }],
  dictTypeCode: [{ required: true, message: '请输入字典类型编码', trigger: 'blur' }]
})

// 过滤字典类型
const filterDictTypes = () => {
  // 计算属性会自动更新，无需额外处理
}

// 加载字典类型数据
const loadDictTypeData = async () => {
  try {
    const res = await getSysDictTypeListApi()
    // 确保数据是数组格式
    dictTypes.value = Array.isArray(res.data) ? res.data : []
  } catch (error) {
    console.error('加载字典类型数据失败:', error)
    ElMessage.error('加载字典类型数据失败')
    dictTypes.value = []
  }
}

// 选择字典类型
const selectDictType = (dictType: SysDictType) => {
  currentDictType.value = dictType
  // 清空当前字典
  currentDict.value = null
  // 加载对应的字典项数据
  refreshDictItems()
}

// 新增字典类型
const addDictType = () => {
  dictTypeDialogTitle.value = '新增字典类型'
  dictTypeForm.dictTypeId = undefined
  dictTypeForm.dictTypeName = ''
  dictTypeForm.dictTypeCode = ''
  dictTypeDialogVisible.value = true
}

// 编辑字典类型
const editDictType = (dictType: SysDictType) => {
  dictTypeDialogTitle.value = '编辑字典类型'
  Object.assign(dictTypeForm, dictType)
  dictTypeDialogVisible.value = true
}

// 保存字典类型
const saveDictType = async () => {
  try {
    const formInstance = dictTypeFormRef.value
    if (formInstance) {
      await formInstance.validate()
    }

    await saveOrUpdateSysDictTypeApi(dictTypeForm)
    ElMessage.success(dictTypeForm.dictTypeId ? '字典类型更新成功' : '字典类型新增成功')

    // 重新加载数据
    await loadDictTypeData()

    // 如果是编辑模式，更新当前选中的字典类型
    if (dictTypeForm.dictTypeId && currentDictType.value?.dictTypeId === dictTypeForm.dictTypeId) {
      const updatedType = dictTypes.value.find(
        (item) => item.dictTypeId === dictTypeForm.dictTypeId
      )
      if (updatedType) {
        currentDictType.value = updatedType
      }
    }

    // 重置表单
    resetDictTypeForm()
    dictTypeDialogVisible.value = false
  } catch (error) {
    console.error('保存字典类型失败:', error)
    ElMessage.error('保存字典类型失败')
  }
}

// 删除字典类型
const deleteDictType = async (dictType: SysDictType) => {
  try {
    await ElMessageBox.confirm('确定要删除这个字典类型吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })

    await deleteSysDictTypeApi(dictType.dictTypeId!)
    ElMessage.success('删除成功')

    // 重新加载数据
    await loadDictTypeData()

    // 如果删除的是当前选中的字典类型，清空选择和相关数据
    if (currentDictType.value?.dictTypeId === dictType.dictTypeId) {
      currentDictType.value = null
      currentDict.value = null
      dictItems.value = []
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除字典类型失败:', error)
      ElMessage.error('删除字典类型失败')
    }
  }
}

// 重置字典类型表单
const resetDictTypeForm = () => {
  dictTypeForm.dictTypeId = undefined
  dictTypeForm.dictTypeName = ''
  dictTypeForm.dictTypeCode = ''
}

// 加载父字典树数据
const loadParentDictTreeData = async () => {
  try {
    if (!currentDictType.value) return

    const res = await getSysDictListApi({ dictTypeCode: currentDictType.value.dictTypeCode })
    if (res.data && Array.isArray(res.data)) {
      // 构建父字典树数据，排除当前编辑的字典项
      parentDictTreeData.value = res.data.filter((item) => item.dictId !== dictItemForm.dictId)
    }
  } catch (error) {
    console.error('加载父字典树数据失败:', error)
    ElMessage.error('加载父字典树数据失败')
  }
}

// 加载字典数据
const loadDictData = async () => {
  try {
    const res = await getSysDictListApi()
    // 更新父字典树数据（排除当前编辑的字典）
    updateParentDictTreeData()
  } catch (error) {
    console.error('加载字典数据失败:', error)
    ElMessage.error('加载字典数据失败')
  }
}

// 更新父字典树数据
const updateParentDictTreeData = () => {
  parentDictTreeData.value = []
}

// 新增字典
const addDict = () => {
  if (!currentDictType.value) {
    ElMessage.warning('请先选择字典类型')
    return
  }

  currentDict.value = {
    dictName: '',
    dictCode: '',
    dictTypeCode: currentDictType.value.dictTypeCode,
    dictParentId: undefined,
    ordinal: 0,
    remark: ''
  }
  updateParentDictTreeData()
}

// 保存字典详情
const saveDict = async () => {
  // 如果没有选择字典，创建一个新的字典对象
  if (!currentDict.value) {
    currentDict.value = {
      dictName: '',
      dictCode: '',
      dictTypeCode: '',
      dictParentId: undefined,
      ordinal: 0,
      remark: ''
    }
  }

  try {
    const formInstance = formRef.value
    if (formInstance) {
      await formInstance.validate()
    }

    await saveOrUpdateSysDictApi(currentDict.value)
    ElMessage.success(currentDict.value.dictId ? '字典更新成功' : '字典新增成功')

    // 重新加载数据，但保持当前编辑状态
    const currentDictId = currentDict.value.dictId
    await loadDictData()

    // 如果是编辑模式，重新获取当前字典的详细信息
    if (currentDictId) {
      try {
        const res = await getSysDictDetailApi(currentDictId)
        currentDict.value = Object.assign({}, res.data || {})
      } catch (error) {
        console.error('重新获取字典详情失败:', error)
      }
    }
  } catch (error) {
    console.error('保存失败:', error)
    ElMessage.error('保存失败')
  }
}

// 删除字典
const deleteDict = async () => {
  if (!currentDict.value?.dictId) {
    ElMessage.warning('请先选择要删除的字典')
    return
  }

  try {
    await ElMessageBox.confirm('确定要删除这个字典吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })

    await deleteSysDictApi(currentDict.value.dictId)
    ElMessage.success('删除成功')

    // 重新加载数据
    await loadDictData()
    currentDict.value = null
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除失败:', error)
      ElMessage.error('删除失败')
    }
  }
}

// 字典项相关数据
const dictItems = ref<DictDTO[]>([])
const dictItemDialogVisible = ref(false)
const dictItemDialogTitle = ref('')
const dictItemFormRef = ref<InstanceType<typeof ElForm>>()
const tableLoading = ref(false)
const dictItemForm = reactive<SysDict>({
  dictName: '',
  dictCode: '',
  dictTypeCode: '',
  dictParentId: undefined,
  ordinal: 0,
  remark: ''
})

// 字典项表单验证规则
const dictItemFormRules = reactive({
  dictName: [{ required: true, message: '请输入字典名称', trigger: 'blur' }],
  dictCode: [{ required: true, message: '请输入字典编码', trigger: 'blur' }],
  dictTypeCode: [{ required: true, message: '请输入字典类型', trigger: 'blur' }]
})

// 刷新字典项数据
const refreshDictItems = async () => {
  if (!currentDictType.value) {
    ElMessage.warning('请先选择字典类型')
    dictItems.value = []
    return
  }
  try {
    tableLoading.value = true
    const res = await getSysDictByTypeApi(currentDictType.value.dictTypeCode)
    console.log('API响应:', res)
    // 确保数据是数组格式
    const data = Array.isArray(res.data) ? res.data : []
    console.log('处理后的数据:', data)
    dictItems.value = data
    console.log('设置后的dictItems:', dictItems.value)
    // 强制触发响应式更新
    await nextTick()
  } catch (error) {
    console.error('刷新字典项数据失败:', error)
    ElMessage.error('刷新字典项数据失败')
    dictItems.value = []
  } finally {
    tableLoading.value = false
  }
}

// 新增字典项
const addDictItem = async () => {
  if (!currentDictType.value) {
    ElMessage.warning('请先选择字典类型')
    return
  }

  // 加载父字典树数据
  await loadParentDictTreeData()

  dictItemDialogTitle.value = '新增字典项'
  dictItemForm.dictId = undefined
  dictItemForm.dictName = ''
  dictItemForm.dictCode = ''
  dictItemForm.dictTypeCode = currentDictType.value.dictTypeCode
  dictItemForm.dictParentId = undefined
  dictItemForm.ordinal = 0
  dictItemForm.remark = ''
  dictItemDialogVisible.value = true
}

// 编辑字典项
const editDictItem = async (item: DictDTO) => {
  if (!item || !item.dictId) {
    ElMessage.warning('无效的字典项数据')
    return
  }

  // 加载父字典树数据
  await loadParentDictTreeData()

  dictItemDialogTitle.value = '编辑字典项'
  Object.assign(dictItemForm, item)
  dictItemDialogVisible.value = true
}

// 保存字典项
const saveDictItem = async () => {
  try {
    const formInstance = dictItemFormRef.value
    if (formInstance) {
      await formInstance.validate()
    }

    await saveOrUpdateSysDictApi(dictItemForm)
    ElMessage.success(dictItemForm.dictId ? '字典项更新成功' : '字典项新增成功')

    // 重新加载数据
    await refreshDictItems()

    // 重置表单
    resetDictItemForm()
    dictItemDialogVisible.value = false
  } catch (error) {
    console.error('保存字典项失败:', error)
    ElMessage.error('保存字典项失败')
  }
}

// 删除字典项
const deleteDictItem = async (item: DictDTO) => {
  if (!item || !item.dictId) {
    ElMessage.warning('无效的字典项数据')
    return
  }

  try {
    await ElMessageBox.confirm('确定要删除这个字典项吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })

    await deleteSysDictApi(item.dictId)
    ElMessage.success('删除成功')

    // 重新加载数据
    await refreshDictItems()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除字典项失败:', error)
      ElMessage.error('删除字典项失败')
    }
  }
}

// 重置字典项表单
const resetDictItemForm = () => {
  dictItemForm.dictId = undefined
  dictItemForm.dictName = ''
  dictItemForm.dictCode = ''
  dictItemForm.dictTypeCode = ''
  dictItemForm.dictParentId = undefined
  dictItemForm.ordinal = 0
  dictItemForm.remark = ''
}

// 添加子字典项
const addChildDictItem = async (item: DictDTO) => {
  if (!item || !item.dictId) {
    ElMessage.warning('无效的字典项数据')
    return
  }

  if (!currentDictType.value) {
    ElMessage.warning('请先选择字典类型')
    return
  }

  // 加载父字典树数据
  await loadParentDictTreeData()

  dictItemDialogTitle.value = '新增子字典项'
  dictItemForm.dictId = undefined
  dictItemForm.dictName = ''
  dictItemForm.dictCode = ''
  dictItemForm.dictTypeCode = currentDictType.value.dictTypeCode
  dictItemForm.dictParentId = item.dictId
  dictItemForm.ordinal = 0
  dictItemForm.remark = ''
  dictItemDialogVisible.value = true
}

// 初始化
onMounted(async () => {
  try {
    await loadDictTypeData()
    // 初始化时清空字典项数据
    dictItems.value = []
  } catch (error) {
    console.error('初始化失败:', error)
    ElMessage.error('页面初始化失败')
  }
})
</script>

<style lang="less" scoped>
.dict-management {
  height: 100%;
  padding: 20px;

  .dict-container {
    display: flex;
    height: 100%;
    gap: 20px;

    .dict-type-panel {
      width: 350px;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      background: #fff;
      display: flex;
      flex-direction: column;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      overflow: hidden;
      transition: all 0.3s ease;

      &:hover {
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
      }

      .panel-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 20px;
        border-bottom: 1px solid #e4e7ed;
        background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);

        h3 {
          margin: 0;
          font-size: 18px;
          font-weight: 600;
          color: #1f2937;
          position: relative;

          &::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 30px;
            height: 2px;
            background: linear-gradient(90deg, #1890ff 0%, #40a9ff 100%);
            border-radius: 1px;
          }
        }

        .header-actions {
          display: flex;
          gap: 8px;
        }
      }

      .search-filter {
        padding: 16px 20px;
        border-bottom: 1px solid #e4e7ed;
        background: #fafbfc;

        .el-input {
          .el-input__wrapper {
            border-radius: 8px;
            border: 1px solid #e5e7eb;
            transition: all 0.3s ease;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

            &:hover {
              border-color: #d1d5db;
              box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
            }

            &.is-focus {
              border-color: #1890ff;
              box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.1);
            }
          }
        }
      }

      .dict-type-list {
        flex: 1;
        overflow-y: auto;
        padding: 8px 0;
        background: #fafbfc;

        &::-webkit-scrollbar {
          width: 6px;
        }

        &::-webkit-scrollbar-track {
          background: #f1f1f1;
          border-radius: 3px;
        }

        &::-webkit-scrollbar-thumb {
          background: #c1c1c1;
          border-radius: 3px;

          &:hover {
            background: #a8a8a8;
          }
        }

        .dict-type-item {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          padding: 16px;
          cursor: pointer;
          border: 1px solid #f0f0f0;
          border-radius: 8px;
          margin: 8px 12px;
          background: #ffffff;
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          position: relative;
          min-height: 70px;

          &:hover {
            background-color: #f8f9fa;
            border-color: #d9ecff;
            box-shadow: 0 4px 12px rgba(24, 144, 255, 0.15);
            transform: translateY(-1px);
          }

          &.active {
            background: linear-gradient(135deg, #e6f7ff 0%, #f0f9ff 100%);
            border-color: #1890ff;
            border-left: 4px solid #1890ff;
            box-shadow: 0 4px 16px rgba(24, 144, 255, 0.2);
          }

          .item-content {
            flex: 1;
            display: flex;
            align-items: flex-start;
            gap: 8px;

            .type-info {
              display: flex;
              flex-direction: column;
              align-items: flex-start;
              gap: 6px;
              min-width: 0;
              flex: 1;

              .type-name {
                font-weight: 600;
                color: #1f2937;
                line-height: 1.4;
                word-break: break-all;
                word-wrap: break-word;
                font-size: 14px;
              }

              .type-code {
                font-size: 11px;
                color: #6b7280;
                background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
                padding: 3px 8px;
                border-radius: 4px;
                line-height: 1.2;
                white-space: nowrap;
                border: 1px solid #e5e7eb;
                font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
                letter-spacing: 0.5px;
              }
            }
          }

          .item-actions {
            display: flex;
            gap: 6px;
            opacity: 0;
            transition: all 0.3s ease;
            margin-top: 4px;
            flex-shrink: 0;

            .el-button {
              padding: 4px 8px;
              font-size: 12px;
              border-radius: 4px;
              transition: all 0.2s ease;

              &:hover {
                transform: scale(1.05);
              }
            }
          }

          &:hover .item-actions {
            opacity: 1;
          }
        }

        .empty-list {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          height: 200px;
          color: #9ca3af;
          padding: 20px;

          p {
            margin: 16px 0 0 0;
            font-size: 14px;
            text-align: center;
            line-height: 1.5;
          }

          &::before {
            content: '📋';
            font-size: 48px;
            margin-bottom: 16px;
            opacity: 0.6;
          }
        }
      }
    }

    .dict-item-panel {
      flex: 1;
      border: 1px solid #e4e7ed;
      border-radius: 8px;
      background: #fff;
      display: flex;
      flex-direction: column;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

      .panel-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 20px;
        border-bottom: 1px solid #e4e7ed;
        background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);

        .header-left {
          display: flex;
          align-items: center;
          gap: 16px;

          h3 {
            margin: 0;
            font-size: 18px;
            font-weight: 600;
            color: #303133;
          }
        }

        .header-actions {
          display: flex;
          gap: 12px;
        }
      }

      .current-dict-type-info {
        padding: 12px 20px;
        background: #f8f9fa;
        border-bottom: 1px solid #e4e7ed;
        display: flex;
        align-items: center;
        gap: 8px;

        .dict-type-label {
          font-size: 14px;
          color: #606266;
          font-weight: 500;
        }

        .dict-type-name {
          font-size: 14px;
          color: #303133;
          font-weight: 600;
        }

        .dict-type-code {
          font-size: 12px;
          color: #909399;
          background: #f5f7fa;
          padding: 2px 6px;
          border-radius: 2px;
          margin-left: 8px;
        }
      }

      .dict-item-content {
        flex: 1;
        padding: 20px;
        overflow: auto;

        .table-card {
          border: none;
          border-radius: 0;
          overflow: hidden;
          box-shadow: none;

          :deep(.el-card__header) {
            padding: 16px 20px;
            border-bottom: 1px solid #f0f0f0;
            background: #fafafa;
          }

          :deep(.el-card__body) {
            padding: 0;
          }

          :deep(.dict-table) {
            .el-table__border-line {
              display: none;
            }

            .el-table__fixed-right {
              border-left: 1px solid #e4e7ed;
            }

            // 修复表格边框超出问题
            .el-table__body-wrapper {
              overflow-x: auto;
            }

            .el-table__header-wrapper {
              overflow: hidden;
            }

            .el-table__fixed-header-wrapper {
              overflow: hidden;
            }
          }

          .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .card-title {
              font-size: 16px;
              font-weight: 500;
              color: #303133;
            }

            .item-count {
              font-size: 14px;
              color: #909399;
              background: #f0f9ff;
              padding: 4px 12px;
              border-radius: 12px;
              border: 1px solid #bae6fd;
            }
          }
        }

        .dict-name {
          font-weight: 500;
          color: #303133;
        }

        .remark-text {
          color: #909399;
          font-style: italic;
        }

        .action-buttons {
          display: flex;
          gap: 8px;
          justify-content: center;
        }

        .empty-state {
          padding: 40px 20px;
          text-align: center;
        }
      }
    }
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
</style>
